<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>武汉理工大学门禁可视化</title>
    <link rel="stylesheet" href="./css/reset.css" />
    <link rel="stylesheet" href="./css/index.css" />
    <link rel="stylesheet" href="./css/echarts-1.css" />
    <link rel="stylesheet" href="./css/echarts-2.css" />
    <link rel="stylesheet" href="./css/echarts-3.css" />
    <link rel="stylesheet" href="./css/echarts-4.css" />
    <link rel="stylesheet" href="./css/echarts-5.css" />
    <link rel="stylesheet" href="./css/echarts-6.css" />
    <link rel="stylesheet" href="./css/echarts-7.css" />
    <link rel="stylesheet" href="./css/echarts-8.css" />
    <link rel="stylesheet" href="./css/modal.css" />
    <link rel="stylesheet" href="./css/loading.css">
    <script src="/js/autofit.js"></script>
    <script>
      window.onload = function (ev) {
        init({
          ignore: ["#map"], // 代表不受全局的transform影响
          dh: 928, // 设计稿的高度，默认是 929 ，如果项目以全屏展示，则可以设置为1080
          dw: 1920, // 设计稿的宽度，默认是 1920
          el: ".page-box", // 渲染的dom，默认是 "#app"
          resize: true, // 是否监听resize事件，默认是 true
        });
        ajax8();
      };
    </script>
  </head>

  <body>
    <div class="page-box">
      <div class="header-box">
        <div class="header-box-left">
          <div class="time-box-1" id="time1"></div>
          <div class="time-box-2">
            <div class="time-box-21" id="time21"></div>
            <div class="time-box-22" id="time22"></div>
          </div>
        </div>
        <div class="header-box-center">武汉理工大学校园门禁可视化</div>
        <div class="header-box-right">
          <div class="button-platform">
            <div class="leftTriangle"></div>
            <div class="toPlatform-title" onclick="toPlatform()">
              高校安全管理平台
            </div>
            <div class="rightTriangle"></div>
          </div>
          <div class="button-report">
            <div class="leftTriangle"></div>
            <div class="report-title">分析报告</div>
            <div class="rightTriangle"></div>
          </div>
        </div>
      </div>
      <div class="echarts-box">
        <div class="echarts-box-left">
          <div class="echarts-content-1">
            <div class="echarts-box-title">在库人员</div>
            <div class="echarts-box-het"></div>
            <img src="/assets/编组 3.png" alt="" />
            <div class="echarts-box-1" id="echarts1"></div>
            <div class="totalNum1">
              <p class="total1">总数</p>
              <p class="num1"></p>
            </div>
          </div>
          <div class="echarts-content-2">
            <div class="echarts-box-title">今日各校门通行统计</div>
            <div class="echarts-box-het"></div>
            <img src="/assets/编组 3.png" alt="" />
            <div class="echarts-box-2" id="echarts2"></div>
          </div>
          <div class="echarts-content-3">
            <div class="echarts-box-title">设备状态</div>
            <div class="echarts-box-het"></div>
            <img src="/assets/编组 3.png" alt="" />
            <div class="change">
              <div class="ControlDevice active">门禁设备</div>
              <div class="monitorDevice">视频设备</div>
            </div>
            <div class="echarts-box-3" id="echarts3"></div>
            <div class="echarts-box-3" id="echarts3.2"></div>
          </div>
        </div>
        <!-- 中间折线图 -->
        <div class="echarts-box-center">
          <div class="echarts-box-camera">
            <div class="camera">
              <img src="/assets/编组 19-2.png" alt="" class="camera-img" />
              <div class="camera-title cTitle1"></div>
            </div>
            <div class="camera">
              <img src="/assets/编组 19-2.png" alt="" class="camera-img" />
              <div class="camera-title cTitle2"></div>
            </div>
            <div class="camera">
              <img src="/assets/编组 19-2.png" alt="" class="camera-img" />
              <div class="camera-title cTitle3"></div>
            </div>
            <div class="camera">
              <img src="/assets/编组 19-2.png" alt="" class="camera-img" />
              <div class="camera-title cTitle4"></div>
            </div>
            <div class="camera">
              <img src="/assets/编组 19-2.png" alt="" class="camera-img" />
              <div class="camera-title cTitle5"></div>
            </div>
          </div>
          <div class="echarts-content-4">
            <div class="echarts-box-title">近14天各校门通行统计</div>
            <div class="echarts-box-het"></div>
            <img src="/assets/zhongjian.png" alt="" />
            <div class="echarts-box-4" id="echarts4"></div>
          </div>
          <div class="echarts-content-5">
            <div class="echarts-box-title">近7周通行统计</div>
            <div class="echarts-box-het"></div>
            <img src="/assets/zhongjian.png" alt="" />
            <div class="echarts-box-5" id="echarts5"></div>
            <div class="person">
              <div class="graduate1">
                本科生
                <div class="down"></div>
              </div>
              <ul class="select">
                <li class="graduate2">研究生</li>
                <li class="graduate3">本科生</li>
              </ul>
            </div>
          </div>
        </div>
        <!-- 右侧 -->
        <div class="echarts-box-right">
          <div class="echarts-content-6">
            <div class="echarts-box-title">今日进出人员分类统计</div>
            <div class="echarts-box-het"></div>
            <img src="/assets/编组 3.png" alt="" />
            <div class="echarts-box-6" id="echarts6"></div>
            <div class="totalNum2">
              <p class="total2">总数</p>
              <p class="num2"></p>
            </div>
          </div>
          <div class="echarts-content-7">
            <div class="echarts-box-title">近一周学生跨校区通行统计</div>
            <div class="echarts-box-het"></div>
            <img src="/assets/编组 3.png" alt="" />
            <div class="echarts-box-7" id="echarts7"></div>
            <!-- <div class="totalNum2">
              <p class="total3">总数</p>
              <p class="num3"></p>
              <ul class="legend">
                <li class="legend-item">
                  <span class="academy"></span>
                  <span class="count"></span>
                </li>
              </ul>
            </div> -->
          </div>
          <div class="echarts-content-8">
            <div class="echarts-box-title">重点关注人员</div>
            <div class="echarts-box-het"></div>
            <img src="/assets/编组 3.png" alt="" />
            <div class="echarts-box-8" id="echarts8">
              <div class="echarts-inner-left">
                <div class="location">
                  <img src="/assets/编组 8-17.png" alt="" />
                  <div class="location-text">
                    <p class="text-title">目标数</p>
                    <span class="text-number"></span>人
                  </div>
                </div>
                <div class="warning">
                  <img src="/assets/编组 8-18.png" alt="" />
                  <div class="warning-text">
                    <p class="text-title">预警数</p>
                    <span class="text-number"></span>人
                  </div>
                </div>
              </div>
              <div class="echarts-inner-right">
                <div class="img">
                  <img src="" alt="" class="getImg" />
                  <div class="bottomTitle"></div>
                </div>
                <div class="place"></div>
                <div class="getTime"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 摄像头弹窗 -->
      <div id="shade" class="c1 hide"></div>
      <div id="modal1" class="c2 hide">
        <header class="monitor">
          <p class="monitor-title">监控</p>
          <p class="monitor-close">✖</p>
        </header>
        <main class="monitor-main">
          <div class="door_title"></div>
          <div class="door_monitor playWnd" id="playWnd">
            <p class="noMon">此处暂无摄像头...</p>
          </div>
          <ul class="pagination"></ul>
        </main>
      </div>
      <!-- 重点关注弹窗 -->
      <!-- <div id="shade" class="c1 hide"></div> -->
      <div id="modal2" class="c2 hide">
        <header class="emphasis">
          <p class="emphasis-title">重点关注人员预警数</p>
          <p class="emphasis-close">✖</p>
        </header>
        <main class="emphasis-person">
          <table>
            <thead>
              <tr>
                <th>编号</th>
                <th>姓名</th>
                <th>出现地点</th>
                <th>出现时间</th>
              </tr>
            </thead>

            <tbody></tbody>
          </table>
        </main>
      </div>
      <!-- 分析报告弹窗 -->
      <div id="modal3" class="c2 hide">
        <header class="statement">
          <p class="statement-title">分析报告生成</p>
          <p class="statement-close">✖</p>
        </header>
        <main class="statement-main">
          <div class="mask"></div>
          <div class="time-input">
            <!-- 开始日期输入框 -->
            <div class="input startTime">
              <label for="start-date">开始日期:</label>
              <input
                type="date"
                id="start-date"
                oninput="validateDateRange()"
              />
            </div>
            <span>~</span>
            <!-- 结束日期输入框 -->
            <div class="input endTime">
              <label for="end-date">结束日期:</label>
              <input type="date" id="end-date" oninput="validateDateRange()" />
            </div>
          </div>
          <div class="getResultBtn">
            <div class="previewReport" onclick="previewReport()">
              预览报告
            </div>
            <div class="generateReport" onclick="downloadReport()">
              生成报告
            </div>
          </div>
          <div class="confirmGen" onclick="generateReport()">
            确定
          </div>
        </main>
      </div>
      <!-- 消息提示 -->
      <div class="messageBox">
        --
      </div>
    </div>
    <script src="js/loading.js"></script>
    <script src="js/echarts.min.js"></script>
    <script src="js/echarts-gl.min.js"></script>
    <script src="js/jquery.min.js"></script>
    <!--三个必要的js文件引入-->
    <script src="js/jquery-1.12.4.min.js"></script>
    <script src="js/jsencrypt.min.js"></script>
    <!-- 用于RSA加密 -->
    <script src="js/web-control_1.2.5.min.js"></script>
    <!-- 用于前端与插件交互 -->
    <script src="js/index.js"></script>
    <script src="js/echarts-1.js"></script>
    <script src="js/echarts-2.js"></script>
    <script src="js/echarts-3.js"></script>
    <script src="js/echarts-3.2.js"></script>
    <script src="js/echarts-monitor.js"></script>
    <script src="js/echarts-4.js"></script>
    <script src="js/echarts-5.js"></script>
    <script src="js/echarts-6.js"></script>
    <script src="js/echarts-7.js"></script>
    <script src="js/echarts-8.js"></script>
    <script src="js/showModal.js"></script>
  </body>
</html>
